<template>
  <div class="Vlog">
    <div class="Vlog-cover">
      <img :src="coverUrl"/>
      <div class="Vlog-cover-icon">
        <van-icon class-prefix="aliIconfont" size="50px" name="icon-bofang2"/>
      </div>
      <div class="Vlog-cover-tag">
        <div>
          <van-icon class-prefix="aliIconfont" size="20px" name="icon-biaoqian"/>
        </div>
        <div>
          {{tag}}
        </div>
      </div>
    </div>
    <div class="Vlog-info">
      <div class="Vlog-info-title">
        {{title}}
      </div>
      <div class="Vlog-info-user" v-if="author">
        <div class="Vlog-info-user-headpic">
          <van-image
            width="35px"
            height="35px"
            round="true"
            :src="author.userImgUrl"
          />
        </div>
        <div class="Vlog-info-user-userName">
          {{author.userName}}
        </div>
        <div class="Vlog-info-user-more">
          <van-icon class-prefix="aliIconfont" size="20px" name="icon-gengduo"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Image as VanImage, Icon } from "vant";
export default {
  components:{
    [VanImage.name]:VanImage,
    [Icon.name]:Icon
  },
  props:['author','title','coverUrl','tag']
}
</script>
<style lang="less">
.Vlog{
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.336);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  .Vlog-cover{
    img{
      width:100%;
      height:100%
    }
    position: relative;
    .Vlog-cover-icon{
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      color:rgba(255, 255, 255, 0.726);
      &::after{
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: black;
        opacity: 0.5;
        background:radial-gradient(black,rgba(0, 0, 0, 0.13));
        box-shadow: 0px 0px 50px rgb(0, 0, 0);
        z-index: -99;
      }
    }
    .Vlog-cover-tag{
      position: absolute;
      top:0;
      display: flex;
      align-items: center;
      color: #fff;
      background: rgba(0, 0, 0, 0.6);
      padding: 4px;
      margin: 4px;
      border-radius: 5px;
    }
  }
  .Vlog-info{
    background: #fff;
    padding: 8px;
    margin-top: -4px;
    .Vlog-info-title{
      font-size: 15px;
      text-align: left;
      font-weight: 600;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow:hidden;
    }
    .Vlog-info-user{
      display: flex;
      align-items: center;
      margin-top:8px;
      .Vlog-info-user-headpic{
        margin-right: 8px;
      }
      .Vlog-info-user-userName{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow:hidden;
      }
      .Vlog-info-user-more{
        flex: 1;
        text-align: right;
      }
    }
  }
}
</style>